/**
 * @Description: 数据探索图表绘制
 * @Author: Tom
 * @Date: 2020-02-28 14:00:11
 * @LastEditors: Tom
 * @LastEditTime: 2020-03-09 10:21:12
 */

// 全局图表核心数据
var nowData = '';
var totalData = {};
// 计算当前图总数
var totalPic = 0;

// 列和行选项内容有更新时执行此方法
function changeChartOption(onlyUpdataType) {
    // 维度(列)-度量(行)
    // 1-1:所有图
    // 1-2:1 3 5 6 8
    // 1-n:1 3 5 6 8
    // 2-1:1 3 5 8

    console.log('数据已经改变');
    // 清空表格
    $('#myTable').html('');
    // 回到图tab
    $('.fa-home').click();
    // 清空选中图

    nowData = '';
    $('.zhinengxianshi-img').addClass('disable');

    // 更新图类型按钮
    var rowNum = $('#ul3 li:visible').length; // 列
    var colNum = $('#ul4 li:visible').length; // 行
    if (rowNum == 1 && colNum == 1) {
        $('.zhinengxianshi-img').removeClass('disable');
    } else if (rowNum == 1 && colNum > 1) {
        [1, 3, 5, 6, 8].map(function (item, index) {
            var eqNum = item - 1;
            $('.zhinengxianshi-img').eq(item - 1).removeClass('disable');
        });
    } else if (rowNum == 2 && colNum == 1) {
        [1, 3, 5, 8].map(function (item, index) {
            var eqNum = item - 1;
            if (item == 1) {
                if (rowNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                } else if (rowNum >= 2 && colNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                }
            } else if (item == 3) {
                if (rowNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                } else if (rowNum >= 2 && colNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                }
            } else if (item == 5) {
                if (rowNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                } else if (rowNum >= 2 && colNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                }
            } else if (item == 6) {
                if (rowNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                }
                // 之前就注释掉了
                //else if (rowNum == 2 && colNum == 1) {
                // $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                //}
            } else if (item == 8) {
                if (rowNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                } else if (rowNum >= 2 && colNum == 1) {
                    $('.zhinengxianshi-img').eq(eqNum).removeClass('disable');
                }
            }
        });
    }
    if (onlyUpdataType) {
        return;
    }
    // 判断当前有无选中的图
    if ($('.chartDiv.active').length) {
        // 若有,请求数据,重绘此图
        console.log('有选中的图,要重绘此图');
        // 1清空当前画布和表格,2能画就请求数据,在当前表格重绘
        console.log('1清空当前画布和表格,2能画就请求数据,在当前表格重绘');
        var closeHtml = '<button class="close"></button>';
        $('.chartDiv.active').html(closeHtml);
        // 获取当前图的id和chartType(这是在初始化画布时就设置好的)
        var id = $('.chartDiv.active').attr('id');
        var chartType = $('.chartDiv.active').attr('chartType');
        console.log(id, chartType);
        // 必须行列都有数据在去请求数据(不能根据li数目计算,因为此时li只是hidden,并未移除)
        if (rowNum && colNum) {
            chosePic(parseInt(chartType), '', true);
        }
        // 修改全局图表核心数据
        // 记录当前表格数据(选项)
        totalData[id] = {
            ul3Html: $('#ul3').html(),
            ul4Html: $('#ul4').html(),
        };
    }
}

// 去请求数据
function requestData(callback) {
    console.log('请求方法');
    // 全局数据置空
    nowData = '';
    // 表格置空
    $('#myTable').html('');
    var strhang = "";
    var strlie = "";
    var a = document.getElementById("ul3");
    for (var i = 0; i < a.children.length; i++) {
        strhang = strhang + a.children[i].title + ",";
    }
    var b = document.getElementById("ul4");
    for (var i = 0; i < b.children.length; i++) {
        strlie = strlie + b.children[i].title + ",";
    }
    if (strlie == "") {
        //alert("列不能为空");
        return;
    }
    var filterdata = $("#filter").val();
    var tablename = $("#input-search")[0].value; //搜索的表名
    var type = $('#mySelect').val();
    var dbname = $('#dbName').val();
    if (tablename == "")
        return;
    $.ajax({
        type: "post",
        async: false,
        url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
        data: {
            mtype: "ExploreData_SearchData",
            tablename: tablename,
            type: type,
            strhang: strhang,
            strlie: strlie,
            filterdata: filterdata, // 过滤条件
            aggregate: 'sum',
            dbname: dbname, // 所选数据库名称
            user: 'admin', // 假用户  当前用户登录名
        },
        datatype: "json",
        success: function (result) {
            if (result && result != "横坐标为空" && result.split('||').length >= 2) {
                $("#myTable").html("");
                $('.daochubiaoge').hide();

                // 数据正常
                console.log('请求成功');
                nowData = result;
                callback(nowData);
                return;
            } else if (result == "横坐标为空") {
                // $("#pictureDiv").html("");
                var yData = [];
                datavalue = [];
            } else {
                console.log(result);
                showDataErr(result);
            }
        }
    });
}

// 图表数据
var pictureChart;
var pictureChartObj = {};

// 点击选择图表
function chosePic(index, e, isRePaint) {
    if ($('.chartDiv.active').length) {
        isRePaint = true;
    }
    var $this = $(e);
    if (!$this.hasClass('disable')) {
        // 回到图tab
        $('.fa-home').click();
        setTimeout(function () {
            // debugger
            // if (!isRePaint) {
            // 去掉当前选中的所有图
            //$('.chartDiv').removeClass('active');
            //}
            // $this.css("border", "1px solid #63a0c4");
            // 如果当前有数据,去画图表,如果没有数据,先请求数据再画图表
            if (nowData) {
                console.log('有数据,直接画');
                DrawChart(index, false, isRePaint);
                setTimeout(function () {
                    //$this.addClass('disable');
                    // $this.css("border", "none");
                }, 0);
            } else {
                console.log('没数据,现请求');
                requestData(function () {
                    console.log('请求成功,画');
                    console.log(nowData);
                    DrawChart(index, false, isRePaint);
                    setTimeout(function () {
                        //$this.addClass('disable');
                        // $this.css("border", "none");
                    }, 0);
                });
            }
        }, 200);
    }
}

$(function () {
    // 点击去表tab
    $('#tableTab').on('click', function () {
        if (nowData) {
            setTimeout(function () {
                // 因为所有的表格都是一样的,1类表格所有情况都存在,所以直接画1且只画表就行
                DrawChart(1, true, false);
            }, 200);
        }
    });
    // 点击选中图表
    $('#newPictureDiv').on('click', '.chartDiv', function (e) {
        if ($(e.target).hasClass('close')) {
            var id = $(e.target).parent().attr('id');
            $('#' + id).remove();
            delete totalData[id];
            return;
        }
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $('.chartDiv').removeClass('active');
            $this.addClass('active');
            // 操作这个图表
            oprateThisChart(this.id);
            // 更新可用状态
            changeChartOption(true);
        } else {
            $this.removeClass('active');
        }
    });
});
// 操作这个图表
function oprateThisChart(id) {
    console.log(id);
    // 实时对应上选项
    $('#ul3').html(totalData[id].ul3Html);
    $('#ul4').html(totalData[id].ul4Html);
    // nowData也要变,为画表做准备
    nowData = totalData[id].nowData;
}

// 绘制图表()
function DrawChart(index, onlyTable, isRePaint) {
    console.log('画图方法');
    console.log(nowData);
    var result = nowData;
    var strs = result.split("||");
    var data = JSON.parse(strs[0]);
    var dic = '';
    if (strs.length == 3) {
        dic = JSON.parse(strs[2]);
    }
    var id = '';

    // 准备画布
    if (!onlyTable) {
        // $("#pictureDiv").hide();
        $("#newPictureDiv").show();
        $("#tabContent").css("background-color", "#5b6071");
        var div;
        var closeHtml = '<button class="close"></button>';
        if (isRePaint) {
            $('.chartDiv.active').html('');
            div = $('.chartDiv.active')[0];

            // 重新初始化echart
            pictureChart = pictureChartObj[div.id];
            // 销毁以前的图
            // if (pictureChart != null && pictureChart != "" && pictureChart != undefined) {
            // pictureChart.dispose(); //销毁
            // }
            div.removeAttribute("_echarts_instance_");
            pictureChart = echarts.init(div);
            // 加删除按钮
            if ($('.chartDiv.active .close').length == 0) {
                $('.chartDiv.active').append(closeHtml);
            }
            // 已经有了不用存了
        } else {
            totalPic++;
            if (totalPic > 8) {
                alert('最多显示8组图表');
                return;
            }
            // 设置id class chartType
            id = 'id_' + Number(Math.random().toString().substr(3, 6) + Date.now()).toString(36);
            var html = '<div class="chartDiv" id="' + id + '" chartType="' + index + '"> </div>';
            $('#newPictureDiv').append(html);
            div = $('#' + id)[0];
            // 重新初始化echart
            pictureChart = echarts.init(div);
            // 存一下
            pictureChartObj[id] = pictureChart;
            // 居中一下
            $('#' + id + '>div').css('margin', '0 auto');
            // 加删除按钮
            if ($('#' + id + ' .close').length == 0) {
                $('#' + id).append(closeHtml);
            }
        }

        // 记录当前表格数据(新绘,重绘)
        totalData[id] = {
            ul3Html: $('#ul3').html(),
            ul4Html: $('#ul4').html(),
            nowData: nowData,
        };
    }

    // 一维图表
    if (strs[1] == "一维") {
        // 这是一维数据
        var yData = [];
        var datavalue = [];
        for (var i = 0; i < data.length; i++) {
            for (var j in data[i]) {
                if (j.toString() == $("#ul3")[0].children[0].title)
                    yData.push(data[i][j]);
                if (j.toString() == $("#ul4")[0].children[0].title)
                    datavalue.push(parseFloat(data[i][j]));
            }
        }
        // 先画表格
        createTable(yData, datavalue);
        if (onlyTable) {
            return;
        }
        // 再画图
        switch (index) {
            case 1:
                showBarOrLine(yData, datavalue, pictureChart, "bar", "1对1");
                break;
            case 2:
                showPieOrRing(yData, datavalue, pictureChart, "70%");
                break;
            case 3:
                showBarOrLine(yData, datavalue, pictureChart, "line", "1对1");
                break;
            case 4:
                showTreeMap(yData, datavalue, pictureChart);
                break;
            case 5:
                showAreaLine(yData, datavalue, pictureChart, "1对1");
                break;
            case 6:
                showRadar(yData, datavalue, pictureChart, "1对1");
                break;
            case 7:
                showPieOrRing(yData, datavalue, pictureChart, ['50%', '70%']);
                break;
            case 8:
                showPolarCoordinates(yData, datavalue, pictureChart, "1对1");
                break;
            case 9:
                showFunnel(yData, datavalue, pictureChart);
                break;
        }
    } else { // 多维
        // 这是多维数据
        var n1 = $("#ul3")[0].children.length;
        var n2 = $("#ul4")[0].children.length;
        var xname = [];
        var yvalue = [];
        for (var i = 0; i < n1; i++) {
            var arr = [];
            xname.push(arr);
        }
        for (var i = 0; i < n2; i++) {
            var arr = [];
            yvalue.push(arr);
        }
        for (var i = 0; i < data.length; i++) {
            for (var j in data[i]) {
                for (var k = 0; k < n1; k++) {
                    if (j.toString() == $("#ul3")[0].children[k].title)
                        xname[k].push(data[i][j]);
                }
                for (var l = 0; l < n2; l++) {
                    if (j.toString() == $("#ul4")[0].children[l].title)
                        yvalue[l].push(parseFloat(data[i][j]));
                }
            }
        }

        // 画图和表
        switch (index) {
            case 1:
                if ($("#ul3")[0].children.length == 1) {
                    createTable3(xname, yvalue);
                    if (onlyTable) {
                        return;
                    }
                    showBarOrLine(xname, yvalue, pictureChart, "bar", "1对n");
                } else if ($("#ul3")[0].children.length >= 2 && $("#ul4")[0].children.length == 1) {
                    createTable4(xname, yvalue, dic);
                    if (onlyTable) {
                        return;
                    }
                    showBarOrLine(xname, yvalue, pictureChart, "bar", "2对1");
                } else {
                    showDataErr();
                }
                break;
            case 3:
                if ($("#ul3")[0].children.length == 1) {
                    createTable3(xname, yvalue);
                    if (onlyTable) {
                        return;
                    }
                    showBarOrLine(xname, yvalue, pictureChart, "line", "1对n");
                } else if ($("#ul3")[0].children.length >= 2 && $("#ul4")[0].children.length == 1) {
                    createTable4(xname, yvalue, dic);
                    if (onlyTable) {
                        return;
                    }
                    showBarOrLine(xname, yvalue, pictureChart, "line", "2对1");
                } else {
                    showDataErr();
                }
                break;
            case 5:
                if ($("#ul3")[0].children.length == 1) {
                    createTable3(xname, yvalue);
                    if (onlyTable) {
                        return;
                    }
                    showAreaLine(xname, yvalue, pictureChart, "1对n");
                } else if ($("#ul3")[0].children.length >= 2 && $("#ul4")[0].children.length == 1) {
                    createTable4(xname, yvalue, dic);
                    if (onlyTable) {
                        return;
                    }
                    showAreaLine(xname, yvalue, pictureChart, "2对1");
                } else {
                    showDataErr();
                }
                break;
            case 6:
                if ($("#ul3")[0].children.length == 1) {
                    createTable3(xname, yvalue);
                    if (onlyTable) {
                        return;
                    }
                    showRadar(xname, yvalue, pictureChart, "1对n");
                } else {
                    showDataErr();
                }
                // 以前就注释掉了
                //else if ($("#ul3")[0].children.length == 2 && $("#ul4")[0].children.length == 1) {
                //    showAreaLine(xname, yvalue, pictureChart, "2对1");
                //    createTable2(xname, yvalue, data);
                //}                
                break;
            case 8:
                if ($("#ul3")[0].children.length == 1) {
                    createTable3(xname, yvalue);
                    if (onlyTable) {
                        return;
                    }
                    showPolarCoordinates(xname, yvalue, pictureChart, "1对n");
                } else if ($("#ul3")[0].children.length >= 2 && $("#ul4")[0].children.length == 1) {
                    createTable4(xname, yvalue, dic);
                    if (onlyTable) {
                        return;
                    }
                    showPolarCoordinates(xname, yvalue, pictureChart, "2对1");
                } else {
                    showDataErr();
                }
                break;
            default:
                showDataErr('此类型图表无法展示该数据, 请选择合适图或者从表格中查看');
        }
    }

    // 画完图后,计算并滚动到最底部
    if (!onlyTable && !isRePaint) {
        var length = $('#newPictureDiv>div').length;
        var $div = $('#newPictureDiv>div').eq(0);
        var scrollTop = Math.ceil(length / 2) * ($div.height() + parseFloat($('#newPictureDiv>div').eq(0).css('margin-top')) * 2 + 2) - $('#newPictureDiv').height();
        $('#newPictureDiv').scrollTop(scrollTop);
    }
}

function showDataErr(text) {
    text = text || '数据错误';
    $('.chartDiv.active').html('<div style="text-align: center;margin: 20px;position: relative;top: 40%;transform: translateY(-50%);color: #aaa;">' + text + '</div>');
    if ($('.chartDiv.active .close').length == 0) {
        var closeHtml = '<button class="close"></button>';
        $('.chartDiv.active').append(closeHtml);
    }
}

function reflashState() {

}

// 存选项
var arr1 = [];
var arr2 = [];
var arr3 = [];
var arr4 = [];
//var datavalue = [];//存放度量所对应的的值
var myxdata = [];
var myydata = [];

// 获取维度、 度量【 待完善】
function searchData() {
    // 清空
    $('.chartDiv.active').removeClass('active');
    $('#ul1,#ul2,#ul3,#ul4').html('');

    // 所选数据库名称
    var dbname = $('#dbName').val();
    // 表类型,数据库表时为0、历史关联表时为1,取自option的value
    var type = $('#mySelect').val();
    // 用户所选或填写的数据库表名、 历史关联表名
    var tablename = $('#input-search').val();
    var flag = false;
    $('.es-list li').each(function (index, item) {
        if (tablename == $(item).html()) {
            flag = true;
            return;
        }
    });
    if (!flag) {
        alert('请选择正确的表名');
    }
    if (tablename == null) {
        alert("请选择表名");
        return;
    }
    // 获取维度、度量【待完善】
    $.ajax({
        type: "post",
        async: false,
        url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
        data: {
            mtype: "ExploreData_GetMeasureAndDimension",
            dbname: dbname, //所选数据库名称
            tablename: tablename,
            type: type, //数据库表时为0、历史关联表时为1
            user: 'admin' // 假用户
        },
        datatype: "json",
        success: function (result) {
            result = result.split('||');
            if (result.length == 3 && result[0] && result[1]) {
                var strs = result;
                if (!(strs[0].length) || !(strs[1].length)) {
                    console.log('无数据');
                    alert('无数据');
                    return;
                }
                var data1 = JSON.parse(strs[0]);
                var data2 = JSON.parse(strs[1]);
                $("#ul1").html("");
                var a = document.getElementById("ul1");
                for (var i = 0; i < data1.length; i++) { //遍历一下json数据
                    arr1.push(data1[i].COLUMN_NAME);
                    arr3.push(data1[i].FIELDNAME);
                    var child = document.createElement("li");
                    child.innerText = data1[i].COLUMN_NAME;
                    child.title = data1[i].FIELDNAME;
                    a.appendChild(child);
                }
                $("#ul2").html("");
                var b = document.getElementById("ul2");
                for (var i = 0; i < data2.length; i++) { //遍历一下json数据
                    arr2.push(data2[i].COLUMN_NAME);
                    arr4.push(data2[i].FIELDNAME);
                    var child = document.createElement("li");
                    child.innerText = data2[i].COLUMN_NAME;
                    child.title = data2[i].FIELDNAME;
                    b.appendChild(child);
                }
            } else {
                alert(result[2]);
            }
        },
        error: function (xhr) {
            console.log(xhr.responseText);
        }
    });
}

// 1柱状图 3折线图
function showBarOrLine(xdata, yvalue, chart, way, showway) {
    var newxdata = [];
    var newydata = [];
    if (showway == "1对n") {
        for (var i = 0; i < yvalue.length; i++) {
            var obj = new Object();
            obj.name = $("#ul4")[0].children[i].title;
            obj.type = '' + way;
            obj.data = yvalue[i];
            newydata.push(obj);
        }
        for (var i = 0; i < xdata[0].length; i++) {
            newxdata.push(xdata[0][i]);
        }
    } else if (showway == "1对1") {
        var obj = new Object();
        obj.name = $("#ul4")[0].children[0].title;
        obj.type = '' + way;
        obj.barWidth = '80%';
        obj.data = yvalue;
        newydata.push(obj);
        for (var i = 0; i < xdata.length; i++) {
            newxdata.push(xdata[i]);
        }
    } else if (showway == "2对1") {
        for (var i = 0; i < xdata[0].length; i++) {
            if (newxdata.length == 0)
                newxdata.push(xdata[0][i]);
            if (xdata[0][i] != newxdata[newxdata.length - 1])
                newxdata.push(xdata[0][i]); //newxdata放横坐标
        }
        var aNewArr = []; //定义一个临时数组
        for (var i = 0; i < xdata[1].length; i++) { //循环遍历当前数组
            //判断当前数组下标为i的元素是否已经保存到临时数组
            //如果已保存，则跳过，否则将此元素保存到临时数组中
            if (aNewArr.indexOf(xdata[1][i]) == -1) {
                aNewArr.push(xdata[1][i]);
            }
        }
        var aNewArr2 = [];
        for (var i = 0; i < aNewArr.length; i++) {
            var arr = [];
            aNewArr2.push(arr);
        }
        for (var i = 0; i < xdata[1].length; i++) {
            for (var j = 0; j < aNewArr.length; j++) {
                if (xdata[1][i] == aNewArr[j]) {
                    aNewArr2[j].push(yvalue[0][i]);
                }
            }
        }
        for (var i = 0; i < aNewArr2.length; i++) {
            var obj = new Object();
            obj.name = aNewArr[i];
            obj.type = "" + way;
            obj.data = aNewArr2[i];
            newydata.push(obj);
        }
    }
    chart.setOption({ //加载数据图表
        color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
        ],
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        backgroundColor: '#2d3041',
        //legend: {
        //    data: aNewArr,
        //    textStyle: {
        //        color: 'white',
        //    }
        //},
        grid: {
            left: '15px',
            right: '20px',
            bottom: '40px',
            top: '40px',
            containLabel: true
        },
        toolbox: {
            show: true,
            x: '94%',
            feature: {
                dataView: {
                    show: false
                },
                saveAsImage: {
                    show: true,
                    name: '统计',
                    excludeComponents: ['toolbox'],
                    pixelRatio: 2,
                    backgroundColor: '#2d3041'
                }
            },
            iconStyle: {
                normal: {
                    color: 'white', //设置颜色
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: newxdata,
            axisLabel: {
                // formatter:'{value}(平方米)',  //给y轴添加单位
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(170,170,170,1)'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '单位(公顷)',
            axisLabel: {
                formatter: '{value}', //给y轴添加单位
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
        },
        dataZoom: {
            show: true,
            height: 20,
            bottom: 16,
            start: 0,
            end: 50,
            handlecolor: '#ddd',
            handlestyle: {
                borderColor: '#cacaca',
                borderWidth: "1",
                shadowBlur: 2,
                background: "#ddd",
                shadowcolor: "#ddd",
            },
            filercolor: (1, 0, 0, 0[{
                offset: 0,
                color: '#1eb5e5'
            }, {
                offset: 1,
                color: '#5ccbb1'
            }]),
            backgroundColor: '#295d8e',
            type: 'slider',
        },
        series: newydata
    });
    chart.on("click", function (param) {
        if (1 > 0) {
            console.log(param.value);
        }
    });

    //window.onresize = debounce(function () {
    //    chart.resize();
    //}, 100, true);
}

// 2饼图 7环状图
function showPieOrRing(xdata, yvalue, chart, way) {
    var newData = [];
    for (var i = 0; i < xdata.length; i++) {
        var obj = new Object();
        obj.name = xdata[i];
        obj.value = yvalue[i];
        newData.push(obj);
    }
    chart.setOption({
        color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
        ],
        tooltip: {
            show: true
        },
        backgroundColor: '#2d3041',
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'center',
            itemWidth: 18, // 设置图例图形的宽
            itemHeight: 12, // 设置图例图形的高
            textStyle: {
                color: 'white', // 图例文字颜色
                fontSize: 12
            },
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            itemGap: 4,
            data: xdata
        },
        toolbox: {
            show: true,
            x: '94%',
            feature: {
                dataView: {
                    show: false
                },
                saveAsImage: {
                    show: true,
                    name: '面积汇总饼状图',
                    excludeComponents: ['toolbox'],
                    pixelRatio: 2,
                    backgroundColor: '#2d3041'
                }
            },
            iconStyle: {
                normal: {
                    color: 'white', //设置颜色
                }
            }
        },
        series: {
            // 根据名字对应到相应的系列
            name: '总面积',
            label: { //饼图图形上的文本标签
                normal: {
                    show: true,
                    //position:'inner', //标签的位置
                    textStyle: {
                        fontSize: 10 //文字的字体大小
                    },
                    formatter: '{b}:{d}%'
                }
            },
            data: newData,
            type: 'pie',
            radius: way,
            center: ['50%', '50%'],
        }
    });

    window.addEventListener("resize", function () {
        chart.resize();
    });
}

// 4树图(方块图)
function showTreeMap(xdata, yvalue, chart) {
    var newdata = [];
    for (var i = 0; i < xdata.length; i++) {
        var obj = new Object();
        obj.name = xdata[i];
        obj.value = parseFloat(yvalue[i]);
        newdata.push(obj);
    }
    chart.setOption({
        color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
        ],
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        backgroundColor: '#2d3041',
        series: {
            data: newdata,
            type: 'treemap',
            label: { //饼图图形上的文本标签
                normal: {
                    show: true,
                    //position:'inner', //标签的位置
                    textStyle: {
                        fontSize: 10 //文字的字体大小
                    },
                    formatter: '{b0}: {c0}'
                }
            }
        }
        //series: [{
        //    type: 'treemap',
        //    data: [{
        //        name: 'nodeA',            // First tree
        //        value: 10,
        //        children: [{
        //            name: 'nodeAa',       // First leaf of first tree
        //            value: 4
        //        }, {
        //            name: 'nodeAb',       // Second leaf of first tree
        //            value: 6
        //        }]
        //    }, {
        //        name: 'nodeB',            // Second tree
        //        value: 20,
        //        children: [{
        //            name: 'nodeBa',       // Son of first tree
        //            value: 20,
        //            children: [{
        //                name: 'nodeBa1',  // Granson of first tree
        //                value: 20
        //            }]
        //        }]
        //    }]
        //}]
    });
    window.addEventListener("resize", function () {
        chart.resize();
    });
}

// 5面积图
function showAreaLine(xdata, yvalue, chart, showway) {
    var newxdata = [];
    var newydata = [];
    if (showway == "1对n") {
        for (var i = 0; i < yvalue.length; i++) {
            var obj = new Object();
            //obj.name = '面积';
            obj.type = 'line';
            obj["areaStyle"] = {
                normal: {}
            };
            obj.data = yvalue[i];
            newydata.push(obj);
        }
        for (var i = 0; i < xdata[0].length; i++) {
            newxdata.push(xdata[0][i]);
        }
    } else if (showway == "1对1") {
        var obj = new Object();
        obj.type = 'line';
        obj["areaStyle"] = {
            normal: {}
        };
        obj.data = yvalue;
        newydata.push(obj);
        for (var i = 0; i < xdata.length; i++) {
            newxdata.push(xdata[i]);
        }
    } else if (showway == "2对1") {
        for (var i = 0; i < xdata[0].length; i++) {
            if (newxdata.length == 0)
                newxdata.push(xdata[0][i]);
            if (xdata[0][i] != newxdata[newxdata.length - 1])
                newxdata.push(xdata[0][i]); //newxdata放横坐标
        }
        var aNewArr = []; //定义一个临时数组
        for (var i = 0; i < xdata[1].length; i++) { //循环遍历当前数组
            if (aNewArr.indexOf(xdata[1][i]) == -1) {
                aNewArr.push(xdata[1][i]);
            }
        }
        var aNewArr2 = [];
        for (var i = 0; i < aNewArr.length; i++) {
            var arr = [];
            aNewArr2.push(arr);
        }
        for (var i = 0; i < xdata[1].length; i++) {
            for (var j = 0; j < aNewArr.length; j++) {
                if (xdata[1][i] == aNewArr[j]) {
                    aNewArr2[j].push(yvalue[0][i]);
                }
            }
        }
        for (var i = 0; i < aNewArr2.length; i++) {
            var obj = new Object();
            obj.name = aNewArr[i];
            obj.type = "line";
            obj["areaStyle"] = {
                normal: {}
            };
            obj.data = aNewArr2[i];
            newydata.push(obj);
        }

    }

    chart.setOption({ //加载数据图表
        color: ['#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
        ],
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        backgroundColor: '#2d3041',
        legend: {
            data: newxdata,
            textStyle: {
                color: 'white',
            }
        },
        grid: {
            left: '15px',
            right: '20px',
            bottom: '40px',
            top: '40px',
            containLabel: true
        },
        toolbox: {
            show: true,
            x: '94%',
            feature: {
                dataView: {
                    show: false
                },
                saveAsImage: {
                    show: true,
                    name: '统计',
                    excludeComponents: ['toolbox'],
                    pixelRatio: 2,
                    backgroundColor: '#2d3041'
                }
            },
            iconStyle: {
                normal: {
                    color: 'white', //设置颜色
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: newxdata,
            axisLabel: {
                // formatter:'{value}(平方米)',  //给y轴添加单位
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(170,170,170,1)'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '单位(公顷)',
            axisLabel: {
                formatter: '{value}', //给y轴添加单位
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
        },
        dataZoom: {
            show: true,
            height: 20,
            bottom: 16,
            start: 0,
            end: 50,
            handlecolor: '#ddd',
            handlestyle: {
                borderColor: '#cacaca',
                borderWidth: "1",
                shadowBlur: 2,
                background: "#ddd",
                shadowcolor: "#ddd",
            },
            filercolor: (1, 0, 0, 0[{
                offset: 0,
                color: '#1eb5e5'
            }, {
                offset: 1,
                color: '#5ccbb1'
            }]),
            backgroundColor: '#295d8e',
            type: 'slider',
        },
        series: newydata
    });
    pictureChart.dispatchAction({
        type: 'takeGlobalCursor',
        key: 'dataZoomSelect',
        // 启动或关闭
        dataZoomSelectActive: true
    });
    window.addEventListener("resize", function () {
        chart.resize();
    });
}

// 6 雷达图
function showRadar(xdata, yvalue, chart, showway) {
    var newData = [];
    var maxValue = 0.0;
    var serisedata = [];
    if (showway == "1对1") {
        for (var i = 0; i < yvalue.length; i++) {
            if (maxValue < parseFloat(yvalue[i]))
                maxvalue = parseFloat(yvalue[i]);
        }
        for (var i = 0; i < yvalue.length; i++) {
            var obj = new Object();
            obj.name = xdata[i];
            //obj.max = maxValue;
            obj.max = yvalue[i] + 10000;
            newData.push(obj);

        }
        var newobj = new Object();
        newobj.value = yvalue;
        newobj.name = "统计";
        serisedata.push(newobj);
    } else if (showway == "1对n") {

        for (var i = 0; i < xdata[0].length; i++) {
            var obj = new Object();
            obj.name = xdata[0][i];
            var c = [];
            for (var j = 0; j < yvalue.length; j++) {
                c.push(yvalue[j][i]);
            }
            obj.max = maxNumber(c) + 10000;
            newData.push(obj);
        }

        for (var i = 0; i < yvalue.length; i++) {
            var obj = new Object();
            obj.name = $("#ul4")[0].children[i].innerText;
            obj.value = yvalue[i];
            serisedata.push(obj);
        }
    }

    function maxNumber(a) { //a是数组
        var maxValue = 0.0;
        for (var i = 0; i < a.length; i++) {
            if (maxValue < parseFloat(a[i]))
                maxvalue = parseFloat(a[i]);
        }
        return maxvalue;
    }

    chart.setOption({
        color: ['#ff69b4', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
        ],
        tooltip: {
            show: true,
        },
        backgroundColor: '#2d3041',
        radar: {
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: newData
        },
        series: [{
            name: '统计',
            type: 'radar',
            data: serisedata
        }]
    });
    window.addEventListener("resize", function () {
        chart.resize();
    });
}

// 8 极坐标图
function showPolarCoordinates(xdata, yvalue, chart, showway) {
    var newxdata = [];
    var newydata = [];
    if (showway == "1对n") {
        for (var i = 0; i < yvalue.length; i++) {
            var obj = new Object();
            //obj.name = '面积';
            obj.type = 'bar';
            obj.coordinateSystem = 'polar';
            obj.data = yvalue[i];
            newydata.push(obj);
        }
        for (var i = 0; i < xdata[0].length; i++) {
            newxdata.push(xdata[0][i]);
        }
    } else if (showway == "1对1") {
        var obj = new Object();
        obj.type = 'bar';
        obj.coordinateSystem = 'polar';
        obj.data = yvalue;
        newydata.push(obj);
        for (var i = 0; i < xdata.length; i++) {
            newxdata.push(xdata[i]);
        }
    } else if (showway == "2对1") {
        for (var i = 0; i < xdata[0].length; i++) {
            if (newxdata.length == 0)
                newxdata.push(xdata[0][i]);
            if (xdata[0][i] != newxdata[newxdata.length - 1])
                newxdata.push(xdata[0][i]); //newxdata放横坐标
        }
        var aNewArr = []; //定义一个临时数组
        for (var i = 0; i < xdata[1].length; i++) { //循环遍历当前数组
            if (aNewArr.indexOf(xdata[1][i]) == -1) {
                aNewArr.push(xdata[1][i]);
            }
        }
        var aNewArr2 = [];
        for (var i = 0; i < aNewArr.length; i++) {
            var arr = [];
            aNewArr2.push(arr);
        }
        for (var i = 0; i < xdata[1].length; i++) {
            for (var j = 0; j < aNewArr.length; j++) {
                if (xdata[1][i] == aNewArr[j]) {
                    aNewArr2[j].push(yvalue[0][i]);
                }
            }
        }
        for (var i = 0; i < aNewArr2.length; i++) {
            var obj = new Object();
            obj.name = aNewArr[i];
            obj.type = "bar";
            obj.data = aNewArr2[i];
            obj.coordinateSystem = 'polar';
            newydata.push(obj);
        }

    }
    chart.setOption({
        color: ['#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
        ],
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            textStyle: {
                color: 'white',
            }
        },
        backgroundColor: '#2d3041',
        angleAxis: {
            type: 'category',
            data: newxdata,
            z: 10,
            textStyle: {
                color: 'white',
            }
        },
        radiusAxis: {
            textStyle: {
                color: 'white',
            }
        },
        polar: {
            textStyle: {
                color: 'white',
            }
        },
        series: newydata
    });
    window.addEventListener("resize", function () {
        chart.resize();
    });
}

// 9 漏斗图
function showFunnel(xdata, yvalue, chart) {
    var newData = [];
    for (var i = 0; i < xdata.length; i++) {
        var obj = new Object();
        obj.name = xdata[i];
        obj.value = yvalue[i];
        newData.push(obj);
    }
    chart.setOption({
        color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
        ],
        tooltip: {
            trigger: 'item',
            //formatter: "{a} <br/>{b} : {c}%"
            formatter: "{a} <br/>{b} : {c}"
        },
        backgroundColor: '#2d3041',
        toolbox: {
            feature: {
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: xdata,
            textStyle: {
                color: 'white'
            }
        },
        calculable: true,
        series: [{
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 100,
            //x2: 80,
            bottom: 10,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: newData
        }]
    });
    window.addEventListener("resize", function () {
        chart.resize();
    });
}